<template>
  <div class="view-head">
    <div :class="activeTitle === 0 ? 'active_css' : ''" @click="handleTitle(0)">
      {{ title }}
    </div>
    <div :class="activeTitle === 1 ? 'active_css' : ''" @click="handleTitle(1)">
      {{ towTitle }}
    </div>
    <div :class="activeTitle === 2 ? 'active_css' : ''" @click="handleTitle(2)">
      {{ threeTitle }}
    </div>
    <div :class="activeTitle === 3 ? 'active_css' : ''" @click="handleTitle(3)">
      {{ fourTitle }}
    </div>
    <div :class="activeTitle === 4 ? 'active_css' : ''" @click="handleTitle(4)">
      {{ fiveTitle }}
    </div>
    <div :class="activeTitle === 5 ? 'active_css' : ''" @click="handleTitle(5)">
      {{ sixTitle }}
    </div>
    <div :class="activeTitle === 6 ? 'active_css' : ''" @click="handleTitle(6)">
      {{ sevenTitle }}
    </div>
    <div :class="activeTitle === 7 ? 'active_css' : ''" @click="handleTitle(7)">
      {{ eightTitle }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    activeTitle: {
      type: Number,
      default: 0,
    },
    headTitle: {
      type: String,
    },
    secondTitle: {
      type: String,
    },
    thirdTitle: {
      type: String,
    },
    fourthTitle: {
      type: String,
    },
    fifthTitle: {
      type: String,
    },
    sixthTitle: {
      type: String,
    },
    seventhTitle: {
      type: String,
    },
    eighthTitle: {
      type: String,
    },
  },

  data() {
    return {
      title: "",
      towTitle: "",
      threeTitle: "",
      fourTitle: "",
      fiveTitle: "",
      sixTitle: "",
      sevenTitle: "",
      eightTitle: "",
    };
  },

  watch: {
    headTitle: {
      handler(val) {
        if (val) {
          this.title = val;
        }
      },
      immediate: true,
    },
    secondTitle: {
      handler(val) {
        if (val) {
          this.towTitle = val;
        }
      },
      immediate: true,
    },
    thirdTitle: {
      handler(val) {
        if (val) {
          this.threeTitle = val;
        }
      },
      immediate: true,
    },
    fourthTitle: {
      handler(val) {
        if (val) {
          this.fourTitle = val;
        }
      },
      immediate: true,
    },
    fifthTitle: {
      handler(val) {
        if (val) {
          this.fiveTitle = val;
        }
      },
      immediate: true,
    },
    sixthTitle: {
      handler(val) {
        if (val) {
          this.sixTitle = val;
        }
      },
      immediate: true,
    },
    seventhTitle: {
      handler(val) {
        if (val) {
          this.sevenTitle = val;
        }
      },
      immediate: true,
    },
    eighthTitle: {
      handler(val) {
        if (val) {
          this.eightTitle = val;
        }
      },
      immediate: true,
    },
  },

  methods: {
    handleTitle(type) {
      this.$emit("changeTitle", type);
    },
  },
};
</script>

<style scoped>
.view-head {
  width: 100%;
  height: auto;
  color: #303333;
  font-size: 16px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 15px;
  margin-bottom: 15px;
  overflow: hidden;
}

.view-head div {
  float: left;
  margin-right: 20px;
  overflow: hidden;
  text-decoration: underline;
  cursor: pointer;
}

.active_css {
  color: #1890ff;
}
</style>
